<template>
  <div class="container">
    <MyComponent :date="hotTags">
      <template v-slot:header>
        <p>本周热搜 TOP5</p>
      </template>
      <template #card="{item}">
        {{ item.label }} <span>{{ item.score }}</span>
      </template>
    </MyComponent>
    <MyComponent :date="potentialInterests">
      <template v-slot:header>
        <p>可能感兴趣的人</p>
        <p>换一批</p>
      </template>
      <template #card="{item}">
        <personCard :date="item"></personCard>
      </template>
    </MyComponent>
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue';
import personCard from './components/personCard.vue';
export default {
  name: 'App',
  components: {
    MyComponent,personCard
  },
  data() {
    return {
      hotTags: [
        { label: '#区块链', score: 96 },
        { label: '#数据挖掘', score: 91 },
        { label: '#无人机', score: 87 },
        { label: '#生命科学', score: 72 },
        { label: '#传感器', score: 60 }
      ],
      potentialInterests: [
        {
          name: '李国盛',
          age: 52,
          gender: 'male',
          researchArea: '机电一体化技术',
          university: '哈尔滨工业大学',
          position: '教授'
        },
        {
          name: '陈颖',
          age: 36,
          gender: 'female',
          researchArea: '人工智能',
          university: '清华大学',
          position: '副教授'
        }
      ]
    };
  }
};
</script>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 20px;
  }
  .container {
    max-width: 600px;
    margin: auto;
    overflow: hidden;
  }
  ul{
    padding: 0;
    margin: 0;
  }
  ul li{
    list-style: none;
  }
</style>